import { ref, type FunctionalComponent as FC } from 'vue';
import BasicItem from './basicItem';
import AnnoItem from './annoItem';
import type {
  ViewBasicSetting,
  ViewAnnoSetting,
} from '@/store/modules/projectDetail/type';
import * as ApiTypes from '@/api/project/project.d';
import '../styles/stepForm.less';
interface Prop {
  id: string;
  layout: string;
  status: string;
  type: 'create' | 'update';
  disabled: boolean;
  form: { basicSetting: ViewBasicSetting; annoSetting: ViewAnnoSetting };
  commonList: ApiTypes.CommonConfigResponse;
  compList: ApiTypes.CompConfigItem[];
  compTotal: number;
  toolList: ApiTypes.ToolConfigItem[];
  lesionList: ApiTypes.LesionConfigItem[];
  watchFormData: Function;
  getFormLeisonDataList: Function;
  clearLesionList: Function;
  getCompData: Function;
  getCompDialog: Function;
  sortAlertTableData: Function;
  clearAlertTableData: Function;
  setSelectCheckAll: Function;
  clearSelectCheckAll: Function;
  delCompAlertData: Function;
  delLesionData: Function;
  changeBizType: Function;
  existedName: Function;
}
// interface Emits {
//   (e: "updateData", data: AnalysisPage.InitParams, flag: boolean): void;
// }
const status = ref(false);
const FirstStep: FC<Prop, any> = (props, ctx) => {
  console.log(props, 'props');
  const { emit } = ctx;
  const handleChange = async () => {
    props.type === 'create' && (status.value = await props.existedName());
    props.type === 'update' &&
      (status.value = await props.existedName(+props.id));
    props.watchFormData('basicSetting.name');
    console.log(status.value, 'status.value');
    emit('updateData', status.value);
  };
  return (
    <div class="step-form-container">
      {/* 任务名称 */}
      <a-form-item
        field="basicSetting.name"
        label="任务名称"
        required
        label-col-props={{ span: 1.5 }}
        wrapper-col-props={{ span: 13 }}
        disabled={props.disabled}
      >
        <a-input
          v-model={props.form.basicSetting.name}
          placeholder="请输入"
          onChange={handleChange}
        />
      </a-form-item>
      <a-divider class="divider-range" />
      {/* 基础设置 */}
      <BasicItem {...props} />
      <a-divider class="divider-range" />
      {/* 标注设置 */}
      <AnnoItem {...props} />
    </div>
  );
};

export default FirstStep;
